<script setup>
import {ref} from "vue";

const props = defineProps({
  size: {
    type: [Number, String],
    default: 21
  },
  icon: {
    type: String,
    default: ''
  },
  marginLeft: {
    type: String,
    default: '0'
  },
  marginRight: {
    type: String,
    default: '0'
  },
  background: {
    type: String,
    default: ''
  },
  rotate: {
    type: Boolean,
    default: false
  }
});

const style = ref({
  marginLeft: props.marginLeft,
  marginRight: props.marginRight
});
</script>

<template>
  <div class="v-icon" :style="style">
    <el-icon :size="size" :class="rotate ? 'v-icon-rotate' : ''">
      <component :is="icon"></component>
    </el-icon>
  </div>
</template>

<style scoped>
.v-icon {
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v-icon:hover {
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  transition: ease-in-out .3s;
}

.v-icon-rotate {
  transform: rotate(0deg);
  transition: ease-in-out .3s;
}

.v-icon:hover > .v-icon-rotate {
  transform: rotate(180deg);
}
</style>